<!-- 
 index、lastIndex为必填项
 如果需要设置activeIndex,则每个<pb-time-line-single>组件都需要设置
 
 使用例子：
 <pb-time-line-single 
 title="我是title"
 subTitle="我是内容"
 v-for="(item,index) in dataSource"
 :key="index" 
 :index="index" 
 :lastIndex="dataSource.length-1" 
 activeColor="red" 
 :activeIndex="2"></pb-time-line-single>
  
 复杂使用例子：
 <pb-time-line-single
 v-for="(item,index) in dataSource"
 :key="index" 
 :index="index" 
 :lastIndex="dataSource.length-1" 
 :openValidator="getChildData"
 @openAction="openAction($event,item)"
 >	
	<template #pointIcon>
 	
	</template>
	<template #title>
 	
	</template>
	<template #subTitle>
 	
	</template>
</pb-time-line-single>
  
  //加载子节点数据（subTitle节点内容如果需要再调用接口获取的使用openValidator方法）
  async getChildData(index) {
	let item = this.dataSource[index]
  	let flag = false
  	//接口调用获取节点数据
  	await xxxxx(url).then(res => {
		this.$set(item,'子节点字段名称',res.data)
  		flag = true
  	}).catch(error => {
  		flag = false
  	})
  	return flag
  },
  
  openAction(open,item) {
	  //更新open状态
	  item['展开缩收字段'] = open
  }
  -->

<template>
	<view class="pb-time-line-single pb-flex-column" :style="styleStr">
		<view class="pb-flex-row pb-cross-stretch" @click="foldAction()">
			<view class="line-content pb-flex-column pb-cross-center">
				<!-- 顶部线条 -->
				<text class="line pb-expanded" :class="{'none':index==0}"
					:style="'background-color:'+lineColr+';'+(nextActiveNode?activeBGColor:'')"></text>

				<!-- icon图标 -->
				<slot name="pointIcon">
					<text class="circle" :style="isActiveNode?activeBGColor:''"></text>
				</slot>

				<!-- 底部线条 -->
				<text class="line pb-expanded" :class="{'none':lastIndex==index}"
					:style="'background-color:'+lineColr+';'+(isActiveNode?activeBGColor:'')"></text>
			</view>

			<view class="pb-expanded" :style="titleStyleStr+(isActiveNode?activeColorTemp:'')">
				<slot name="title">
					<text>{{title}}</text>
				</slot>
			</view>
		</view>
		<view class="pb-flex-row">
			<!-- 中间线条 -->
			<view class="line-content pb-flex-column pb-cross-center">
				<text class="line pb-expanded" :class="{'none':lastIndex==index}"
					:style="'background-color:'+lineColr+';'+(isActiveNode?activeBGColor:'')"></text>
			</view>
			<view v-if="tempOpen" class="pb-expanded" :style="subTitleStyleStr+(isActiveNode?activeColorTemp:'')">
				<slot name="subTitle">
					<text>{{subTitle}}</text>
				</slot>
			</view>
			<view v-else style="height: 24rpx;background-color: transparent;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pb-time-line-single",
		props: {
			title: {
				type: String,
			},
			subTitle: {
				type: String,
			},
			//当前组件索引值
			index: {
				type: Number,
				default: 0,
				require: true,
			},
			//最后一个组件的索引值（总共需要渲染多少 length-1）
			lastIndex: {
				type: Number,
				require: true
			},
			//激活节点组件的索引值 （哪个激活就变色activeColor）
			activeIndex: {
				type: Number,
			},
			open: {
				type: Boolean,
				default: true
			},
			enableFold: {
				type: Boolean,
				default: false,
			},
			titleStyle: {
				type: [String, Object],
				default: () => {
					return {
						"font-size": "32rpx",
						"line-height": "48rpx",
						"color": "var(--text-main)"
					}
				}
			},
			subTitleStyle: {
				type: [String, Object],
				default: () => {
					return {
						"font-size": "28rpx",
						"line-height": "44rpx",
						"padding-bottom": "12rpx",
						"color": "var(--text-auxiliary)"
					}
				}
			},
			activeColor: {
				type: String,
			},
			lineColr: {
				type: String,
				default: 'rgba(0, 0, 0, 0.1)'
			},
			bgColor: {
				type: String,
				default: "#FFF"
			},
			//可选参数（异步加载subTitle节点数据）
			openValidator: {
				type: Function,
			},
		},
		data() {
			return {
				styleStr: '',
				subTitleStyleStr: '',
				activeColorTemp: '',
				activeBGColor: '',
				timeLineBgColor: '',
				tempOpen: true,
			};
		},
		watch: {
			open: {
				handler(newVal) {
					this.tempOpen = newVal
				},
				immediate: true
			},
			titleStyle: {
				handler(newVal) {
					if (newVal instanceof Object) {
						this.titleStyleStr = uni.$u.addStyle(newVal, 'string')
					} else {
						this.titleStyleStr = newVal
					}
				},
				immediate: true
			},
			subTitleStyle: {
				handler(newVal) {
					if (newVal instanceof Object) {
						this.subTitleStyleStr = uni.$u.addStyle(newVal, 'string')
					} else {
						this.subTitleStyleStr = newVal
					}
				},
				immediate: true
			},
			activeColor: {
				handler(newVal) {
					if (newVal) {
						this.activeColorTemp = `color:${newVal};`
						this.activeBGColor = `background-color:${newVal};`
					}
				},
				immediate: true
			},
			bgColor: {
				handler(newVal) {
					let style = {
						"background-color": newVal,
					}
					this.styleStr = uni.$u.addStyle(style, 'string')
				},
				immediate: true
			}
		},
		computed: {
			nextActiveNode() {
				if (this.activeIndex != undefined && this.activeIndex != null) {
					return (this.index == (this.activeIndex + 1)) ? true : false
				}
				return false
			},
			isActiveNode() {
				if (this.activeIndex != undefined && this.activeIndex != null) {
					return (this.index == this.activeIndex) ? true : false
				}
				return false
			}
		},
		methods: {
			async foldAction() {
				if (this.enableFold) {
					if (this.tempOpen == false && this.openValidator && typeof(this.openValidator) === 'function') {
						var flag = await this.openValidator.call(uni.$u.$parent.call(this), this.index)
						if (!flag) {
							//未获取到节点数据
							console.log('【pb-time-line】open :获取节点数据失败')
							return
						}
					}

					this.tempOpen = !this.tempOpen
					this.$emit('openAction', this.tempOpen)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pb-time-line-single {
		.line-content {
			width: 50rpx;
			flex-shrink: 0;

			.circle {
				width: 20rpx;
				height: 20rpx;
				border-radius: 100%;
				background-color: $uni-border-color;
			}

			.line {
				width: 2rpx;
				height: 100%;
				// background-color: $uni-border-color;

				&.none {
					width: 0;
				}
			}
		}
	}
</style>